<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1678498_9dksj4bneo.css">
</head>

<body>
    <div id="nav-tab">
        <div class="nav-tab-item" :class="{'active':activeIndex==index}" v-for="(item,index) in items" @click="activeIndex=index">
            <i :class=item.icon class="iconfont nav-tab-item-icon"></i>
            <p class="item-lable">{{item.label}}</p>
        </div>
        <div class="nav-tab-overlay" :style="{'left':activeIndex*80+'px'}"></div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        new Vue({
            el: '#nav-tab',
            data() {
                return {
                    items: [{
                        icon: 'icon-shouye',
                        label: '首页'
                    }, {
                        icon: 'icon-guanzhu',
                        label: '关注'
                    }, {
                        icon: 'icon-faxian',
                        label: '发现'
                    }, {
                        icon: 'icon-xiaoxizhongxin',
                        label: '消息中心'
                    }],
                    activeIndex: 0
                }
            },
        })
    </script>
</body>

</html>